.activity-giftindex{
  max-width: 400px;
  min-width: 250px;
  margin:0 auto;
  img{
    width: 100%;
    margin:0 auto;
    padding:0;
    display: block;
  }


  .gift-container{
    background: #fead16;
    position: relative;
    overflow: hidden;
    .header-tip{
      height: 70px;
      line-height: 70px;
      font-size:20px;
      text-align: center;
      color:#f03128;
      font-weight: bold;
    }

    .gift-content{
      height: 300px;
      position: relative;
      color: #fed517;
      .gift-bg{
        position: absolute;
        width:100%;
        height: 100%;
        top:0;
        left:0;
        z-index: 3;
        background: url(./image/gift-bg.png) no-repeat center center;
        background-size:auto 100%;
      }
    }

    .guide-lottery{
      padding-top:20px;
      height: 80px;
      position: relative;
      max-width: 280px;
      margin:0 auto;
      .content{
        left:0;
        position: absolute;
        width: 100%;
        z-index: 9;
        div{
          a{
            display: block;
            width:120px;
            height: 40px;
          }
          .btn-share{
            background: url(./image/btn-share.png) no-repeat center center;
            background-size:120px 30px;
            float: left;
          }
          .btn-assets{
            background: url(./image/btn-assets.png) no-repeat center center;
            background-size:120px 30px;
            float: right;
          }
        }
        img{
          width: 80%;
          margin:0 auto;
        }
      }
    }
  }

  /***************  默认  *************/
  .default{
    .light{
      position: absolute;
      top:50%;
      left:50%;
      width: 1000px;
      height:1000px;
      margin-top:-500px;
      margin-left:-500px;
      background: url(./image/light.png) no-repeat center center;
      background-size: 100% 100%;
      -webkit-animation-name: resize,opacity;
      -webkit-animation-duration: 15s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear ;
    }
    .gift{
      position: absolute;
      z-index: 9;
      width:120px;
      height: 160px;
      top:50%;
      left:50%;
      margin-left:-60px;
      margin-top:-80px;
      background: url('./image/paper.png') no-repeat center;
      background-size:100% 100%;
      text-align: center;
      font-weight: bold;
      color: #fed517;

      letter-spacing: 0;
      span{
        left:0;
        top:70px;
        display: block;
        position: absolute;
        width:120px;
        text-align: center;
        height: 50px;
        line-height: 50px;
        font-size:50px;
        color: #fed517;
        opacity:0;
        -webkit-animation-duration: 10s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: ease-in ;
      }
      .throw1{
        -webkit-animation-name: throw1;
        -webkit-animation-delay:0;
      }
      .throw2{
        -webkit-animation-name: throw3;
        -webkit-animation-delay:1s;
      }
      .throw3{
        -webkit-animation-name: throw1;
        -webkit-animation-delay:2s;
      }
      .throw4{
        -webkit-animation-name: throw2;
        -webkit-animation-delay:3s;
      }
      .throw5{
        -webkit-animation-name: throw3;
        -webkit-animation-delay:4s;
      }
      .throw6{
        -webkit-animation-name: throw2;
        -webkit-animation-delay:5s;
      }
      .throw7{
        -webkit-animation-name: throw1;
        -webkit-animation-delay:6s;
      }
      .throw8{
        -webkit-animation-name: throw3;
        -webkit-animation-delay:7s;
      }
      .throw9{
        -webkit-animation-name: throw1;
        -webkit-animation-delay:8s;
      }
      .throw10{
        -webkit-animation-name: throw3;
        -webkit-animation-delay:9s;
      }
    }

  }
}

//光透明度
@-webkit-keyframes throw1 {
  0% {
    opacity:0;
    -webkit-transform:translate(0, 0);
  }
  10% {
    opacity:1;
    -webkit-transform:translate(0, 0);
  }
  40% {
    opacity:0;
    -webkit-transform:translate(-100px, -300px);
  }
  100% {
    opacity:0;
    -webkit-transform:translate(0, 0);
  }
}

@-webkit-keyframes throw2{
  0% {
    opacity:0;
    -webkit-transform:translate(0, 0);
  }
  10% {
    opacity:1;
    -webkit-transform:translate(0, 0);
  }
  40% {
    opacity:0;
    -webkit-transform:translate(100px, -300px);
  }
  100% {
    opacity:0;
    -webkit-transform:translate(0, 0);
  }
}

@-webkit-keyframes throw3{
  0% {
    opacity:0;
    -webkit-transform:translate(0, 0);
  }
  10% {
    opacity:1;
    -webkit-transform:translate(0, 0);
  }
  40% {
    opacity:0;
    -webkit-transform:translate(0, -300px);
  }
  100% {
    opacity:0;
    -webkit-transform:translate(0, 0);
  }
}

/***********  等待 ************/
.waiting{
  .gift-content{
    .waiting-pager{
      position: absolute;
      top:30px;
      left:0;
      height: 240px;
      width: 100%;
      line-height: 240px;
      text-align: center;
      background: url(./image/waiting-pager.png) no-repeat center center;
      background-size:auto 200px;
      -webkit-transform:rotate(-20deg);
      font-size:60px;
      font-weight: bold;
      .money{
        font-size: 30px;
      }
    }
  }
}

.open{
  .gift-content{
    background: url(./image/open-paper.png) no-repeat center;
    background-size:auto 240px;
    line-height: 200px;
    text-align: center;
    font-size:100px;
    .open-pager{
      color: #ff7020;
      .money{
        font-size:50px;
      }
    }
  }
  .guide-lottery{
    .btn-register{
      background: url(./image/btn-register.png) no-repeat center center;
      background-size:120px 30px;
      float: left;
    }
  }
}


//光旋转
@-webkit-keyframes resize {
  0% {
    -webkit-transform:rotate(0deg);
  }
  50% {
    -webkit-transform:rotate(180deg);
  }
  100% {
    -webkit-transform:rotate(360deg);
  }
}

//光透明度
@-webkit-keyframes opacity {
  0% {
    opacity:1;
  }
  25% {
    opacity:.6;
  }
  50% {
    opacity:.2;
  }
  75% {
    opacity:.6;
  }
  100% {
    opacity:1;
  }
}

//红包跳动
@-webkit-keyframes trans {
  0% {
    -webkit-transform:translate(0, 0);
  }
  15% {
    -webkit-transform:translate(-2px, -5px);
  }
  30% {
    -webkit-transform:translate(0, 0);
  }
  45% {
    -webkit-transform:translate(-2px, -5px);
  }
  60% {
    -webkit-transform:translate(0, 0);
  }
  100% {
    -webkit-transform:translate(0, 0);
  }
}

@-webkit-keyframes glow {
  0% {
    -webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 0.5);
    border-color: rgba(160, 179, 214, 0.5);
  }
  100% {
    -webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 1.0), 0 0 18px rgba(0, 140, 255, 1.0);
    border-color: rgba(160, 179, 214, 1.0);
  }
}